@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('./iconfont.css');
:root {
  --primary: #2A9D8F;
  --bg-light: #F0F7FF;
  --bg-dark: #0A192F;
  --code-accent: #64FFDA;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-opensans text-gray-800 dark:text-gray-200;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-montserrat font-bold;
  }
  
  h1 {
    @apply text-4xl md:text-5xl;
  }
  
  h2 {
    @apply text-3xl md:text-4xl;
  }
  
  h3 {
    @apply text-2xl md:text-3xl;
  }
  
  pre, code {
    @apply font-firacode;
  }
}

@layer components {
  .btn {
    @apply px-6 py-2 rounded-md font-medium transition-all duration-300;
  }
  
  .btn-primary {
    @apply btn bg-primary text-white hover:bg-opacity-90;
  }
  
  .btn-outline {
    @apply btn border-2 border-primary text-primary hover:bg-primary hover:text-white;
  }
  
  .card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300;
  }
  
  .wave-bg {
    @apply relative overflow-hidden;
  }
  
  /* .wave-bg::before {
    content: '';
    @apply absolute w-full h-full bg-primary bg-opacity-10 dark:bg-opacity-20 -z-10;
  } */
  
  .wave-bg::after {
    content: '';
    @apply absolute w-[200%] h-[200%] top-0 left-[-50%] bg-primary bg-opacity-5 dark:bg-opacity-10 rounded-[40%] animate-wave -z-10;
  }
  
  .progress-bar {
    @apply h-1 bg-gradient-to-r from-primary to-code-accent;
  }
  
  .tech-badge {
    @apply inline-block px-3 py-1 rounded-full text-xs font-medium bg-primary bg-opacity-20 text-primary dark:bg-opacity-30 dark:text-code-accent;
  }
}

/* 3D卡片效果 */
.card-3d {
  @apply transition-all duration-300 transform;
  perspective: 1000px;
}

.card-3d:hover {
  @apply -translate-y-2 rotate-1;
}

/* 阅读进度条 */
.reading-progress {
  @apply fixed top-0 left-0 h-1 z-50 bg-gradient-to-r from-primary to-code-accent;
}

/* 代码高亮自定义样式 */
.code-block {
  @apply relative rounded-lg overflow-hidden;
}

.code-block .copy-button {
  @apply absolute top-2 right-2 p-1 rounded bg-gray-700 text-white opacity-0 transition-opacity;
}

.code-block:hover .copy-button {
  @apply opacity-100;
}

/* 暗黑模式切换按钮 */
.theme-toggle {
  @apply relative w-12 h-6 rounded-full bg-gray-300 dark:bg-gray-700 transition-colors duration-300;
}

.theme-toggle::after {
  content: '';
  @apply absolute top-1 left-1 w-4 h-4 rounded-full bg-white dark:bg-code-accent transform transition-transform duration-300;
}

.theme-toggle.dark::after {
  @apply translate-x-6;
}
html.dark img{
  filter: invert(0.3) !important;
  will-change: filter;
  image-rendering: pixelated;
}
img{
  transition: filter 0.3s ease-in-out;
  will-change: filter;
  image-rendering: pixelated;
}